<template>
    <div class="order-detail">
        <van-nav-bar title="订单详情" left-arrow :border="false" @click-left="$router.back()" fixed placeholder/>
        <white-space/>
        <order-detail-header :order="order"/>
        <white-space/>
        <div class="order-detail-store">
            <van-icon name="shop-o" :size="20"/>
            <span class="order-detail-store-name">{{order.storeName}}</span>
        </div>
        <div class="order-detail-items">
            <order-item v-for="item in order.items" :key="item.id" :item="item"/>
        </div>
        <white-space/>
        <van-cell-group>
            <van-cell center>
                <template #title>
                    <div class="order-detail-amount-line">
                        <span class="order-detail-amount-label">商品总价</span>
                        <price class-name="order-detail-amount-price" :value="order.totalPrice"/>
                    </div>
                    <div class="order-detail-amount-line">
                        <span class="order-detail-amount-label">运费(快递)</span>
                        <price class-name="order-detail-amount-price" :value="order.totalShippingCost"/>
                    </div>
                    <div class="order-detail-amount-line">
                        <span class="order-detail-amount-label">优惠</span>
                        <price class-name="order-detail-amount-price" :value="order.totalDiscountTotalPrice"/>
                    </div>
                    <div class="order-detail-amount-line">
                        <span class="order-detail-amount-label">运费优惠</span>
                        <price class-name="order-detail-amount-price"
                               :value="order.totalDiscountShippingCost"/>
                    </div>
                </template>
            </van-cell>
            <van-cell center>
                <template #title>
                    <div class="order-detail-subtotal-amount">
                        <span class="order-detail-amount-label">实付款</span>
                        <price class-name="order-detail-amount-price" decimal="small" :value="order.totalAmount"/>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <white-space/>
        <order-detail-info :order="order"/>
        <white-space/>
        <placeholder height="50"/>
        <div class="order-detail-bottom-actions van-hairline--top">
            <order-actions :order="order" @cancel="refreshOrder" @receipt="refreshOrder"/>
        </div>
    </div>
</template>

<script>
  import { message, order } from "@mall/api-services"
  import { Cell, CellGroup, Icon, NavBar, NoticeBar, Toast } from "vant"
  import OrderDetailHeader from "@/views/order/OrderDetailHeader"
  import WhiteSpace from "@/components/WhiteSpace"
  import OrderItem from "@/components/order/OrderItem"
  import Price from "@/components/Price"
  import OrderDetailInfo from "@/views/order/OrderDetailInfo"
  import Placeholder from "@/components/Placeholder"
  import OrderActions from "@/components/order/OrderActions"

  export default {
    name: "OrderDetail",
    components: {
      OrderActions,
      Placeholder,
      OrderDetailInfo,
      Price,
      OrderItem,
      WhiteSpace,
      OrderDetailHeader,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [NoticeBar.name]: NoticeBar,
      [Icon.name]: Icon,
    },
    props: {
      id: String,
    },
    data() {
      return {
        order: new order.Order(),
      }
    },
    computed: {},
    created() {
      this.refreshOrder()
    },
    methods: {
      refreshOrder() {
        const { id } = this
        Toast.loading()
        order.OrderServiceV1.getOrder(id)
          .then(aOrder => this.order = aOrder)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => Toast.clear())
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-detail {

        .order-detail-store {
            background: #fff;
            display: flex;
            align-items: center;
            line-height: 1rem;
            padding: 9px;

            .order-detail-store-name {
                margin: 0 4px;
            }
        }

        .order-detail-items {
            background: #fff;
        }

        .order-detail-amount-line {
            display: flex;
            justify-content: space-between;
            line-height: 1rem;
            margin-bottom: 9px;
            font-size: 13px;
            color: $gray-7;

            .order-detail-amount-price {
                color: inherit;
                font-size: inherit;
            }
        }

        .order-detail-subtotal-amount {
            display: flex;
            justify-content: space-between;
            line-height: 1rem;
        }

        .order-detail-bottom-actions {
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            height: 50px;
            background: #fff;
            padding: 0 9px;
        }
    }
</style>
